<template>
  <sys-page ref="page" :columns="columns" :model="model" :loader="loader" :label-width="null" @add="onAdd" showAddBtn
            :query-props="{expandAble: false}">
    <!-- append自定义按钮 -->

    <!-- 表单查询 -->
    <template v-slot:form>
      <el-form-item>
        <el-input v-model="model.title" placeholder="标题" clearable></el-input>
      </el-form-item>
    </template>

    <template v-slot:ctrl="{row}">
      <el-button type="text" icon="el-icon-view"  @click="onView(row)">预览</el-button>
      <el-button type="text" icon="el-icon-edit"  @click="onEdit(row)">编辑</el-button>
      <el-button type="text" icon="el-icon-remove" class="btn-danger" @click="onDelete(row)">删除</el-button>
    </template>

  </sys-page>
</template>
<script>

import editJson from '@/components/modules/content/edit-json'
import {postSysContentList, postSysContentDelete} from '$my/code/api/content'


function getColumns() {
  return [
    {type: 'selection', align: 'center'},
    {type: 'index', label: '序号', align: 'center'},
    {prop: 'title', label: '标题', align: 'center', width: 180, showOverflowTooltip: true, display: true},
    {prop: 'content', label: '内容', align: 'center', minWidth: 350, showOverflowTooltip: true, display: true},
    {prop: 'createTime', label: '创建时间', align: 'center', width: 180, showOverflowTooltip: true, display: true},
    {prop: 'updateTime', label: '更新时间', align: 'center', width: 180, showOverflowTooltip: true, display: true},
    {prop: 'ctrl', label: '操作', width: 210, fixed: 'right', align: 'center'}
  ]
}

export default {
  name: 'content',
  data() {
    return {
      model: {
        title: '',
        type: ''
      },
      columns: getColumns()
    }
  },
  methods: {
    loader(model) {
      // return fetchList(model)
      return postSysContentList(model)
    },
    onAdd() {
      this.$refs.page.setDialog({
        title: '新增大屏配置',
        height: '80%',
        width: '80%',
        comp: editJson,
        props: {
        }
      })
    },
    onEdit(row) {
      const {id} = row
      this.$refs.page.setDialog({
        title: '修改大屏配置',
        height: '80%',
        width: '80%',
        comp: editJson,
        props: {
          id: id + ''
        }
      })
    },
    onDelete(row) {
      this.doDelete([row.id])
    },
    onBatchDelete() {
      const shopList = this.$refs.page.shopList
      if (shopList.length === 0) {
        this.$message.warning('请先勾选数据！')
        return
      }
      const ids = shopList.map(o => o.id)
      this.doDelete(ids)
    },
    doDelete(ids) {
      this.$confirm('请再三确实是否删除该公告!!!!', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        postSysContentDelete(ids).then(_ => {
          this.$notify.success('删除成功!')
          this.$refs.page.shopList = []
          this.$refs.page.reload()
        })
      })
    },
    onView(row) {
      window.open('/#/screen?c=' + row.id)
    }
  }
}

</script>
